<!DOCTYPE html>
<html>
<head>
	<title>nav route</title>
	<meta charset="utf-8" />

	<style type="text/css">
		*{margin: 0; padding: 0;}
		body, html{
			width: 100%;
		    height: 100%;
		    overflow-x: auto;
		    overflow-y: hidden;
		}
		.header{
			width: 100%;
			height: 60px;
		}
		.container{
			width: 100%;
			height: 100%;
		}
		.silder_nav{
			width: 200px;
			height: 100%;
			background: #aee;
			float: left;
	/*		width: 180px;
		    height: 100%;
		    background: #4c5063;
		    float: left;*/
		}
		.main{
			position: relative; 
			height: 100%; 
			overflow: hidden;
			/*width: auto;*/
			background: #eee;
		}
		.main iframe{
			border: 0;
		}
	</style>
</head>
<body>

<header class="header">
	
</header>

<div class="container">
	<div class="silder_nav">
		<div class="nav_main">
			<div class="nav_sec">
				<h3>title one</h3>
				<div class="nav-a"><a href="./page/one.html">link one</a></div>
				<div class="nav-a"><a href="./page/two.html">link two</a></div>
				<div class="nav-a"><a href="./page/three.html">link three</a></div>
			</div>
			<div class="nav_sec">
				<h3>title two</h3>
				<div class="nav-a"><a href="./page/four.html">link four</a></div>
				<div class="nav-a"><a href="./page/five.html">link five</a></div>
				<div class="nav-a"><a href="./page/six.html">link six</a></div>
			</div>
		</div>
	</div>

	<div class="main">
		<iframe  width="100%" height="85%" src="./page/one.html"></iframe>
	</div>
</div>

<script type="text/javascript" src='./js/jquery-3.1.1.min.js'></script>
<script type="text/javascript">
	$(function () {
		// body...
		$('.nav-a a').click(function (e) {
			var e = window.e || e;
			//浏览器兼容
			e.preventDefault();
			//阻止默认事件
			// console.log($(this).attr('href'))
			$('iframe').prop('src',$(this).attr('href'))
		})
	})

	// 对于HTML元素本身就带有的固有属性，只存在true/false的属性在处理时，使用prop方法。
	// 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
</script>


</body>
</html>